<link rel="stylesheet" href="ccay/example/demo.css"  type="text/css" />
<script type="text/javascript" src="ccay/example/demo.js" charset="utf-8"></script>
<script type="text/javascript" src="ccay/example/ui/igrid/rowRenderFunction.js" charset="utf-8"></script>
<style type="text/css">
	h5{font-size: 13px; font-weight: normal; line-height: 13px; float: right;}
	h6{font-size: 13px; color: red; float: left; line-height: 13px;}
	.showClew{font-size: 12px; color: olive;}
	.showClew span{color: peru;}
	.spanShow{color: peru;}
	.tree-icon a{height:16px; cursor:pointer; padding:3px 20px 2px 0; margin-right:auto; *display: inline-block; border-width: 0px;}
	.tree-def-open{background:url('ccay/web/resource/skins/default/images/icons.png') no-repeat -140px 0px;}
	.tree-def-close{background:url('ccay/web/resource/skins/default/images/icons.png') no-repeat -120px 0px;}
	.tree-def{background:url('ccay/web/resource/skins/default/images/icons.png') no-repeat -20px -160px;}
	.tree-1-open{background:url('ccay/web/resource/skins/default/images/icons.png') no-repeat 0 -60px;}
	.tree-1-close{background:url('ccay/web/resource/skins/default/images/icons.png') no-repeat -60px -60px;}
	.tree-1{background:url('ccay/web/resource/skins/default/images/icons.png') no-repeat -20px -160px;}
	.tree-2-open{background:url('ccay/web/resource/skins/default/images/icons.png') no-repeat -20px -60px;}
	.tree-2-close {background:url('ccay/web/resource/skins/default/images/icons.png') no-repeat -40px -60px;}
	.tree-2 {background:url('ccay/web/resource/skins/default/images/icons.png') no-repeat -20px -160px;}
	.tree-3-open{background:url('ccay/web/resource/skins/default/images/icons.png') no-repeat -280px 0px;}
	.tree-3-close{background:url('ccay/web/resource/skins/default/images/icons.png') no-repeat -80px -60px;}
	.tree-3{background:url('ccay/web/resource/skins/default/images/icons.png') no-repeat -20px -160px;}
</style>
<div id="rowRenderDemo">
	<!-- API区 -->
	<div title='API' tabid='tab1'><br />
		<h2 style="cursor: pointer;"><a onclick="Ccay.Common.toggle(this,'#rowApi')">IGrid行渲染rowRender配置属性表</a></h2>
		<div style="display:none" id="rowApi">
			<form class="init ccay-form">
			<div class="ccay-form-body ccay-form-custom">
				<ul>
					<li class="ccay-form-row">
						<samp><h3>内置类型</h3></samp>
						<span class="ccay-form-input"><h3 style="float: left;">描述</h3></span>
					</li>
					<li class="ccay-form-row">
						<samp class="i18n" i18nKey="rowSpan"></samp>	
						<span class="ccay-form-input">设置igrid显示为行合并类型。<br><h6>示例：rowRender: "rowSpan"</h6><br>
							rowRenderOp：{Object} 对行渲染类型进行配置<h5><a onclick="Ccay.example.ui.igird.rowRenderFunction.openDemo('tab2');">点击查看Demo</a></h5>
							<div class="ccay-form-body">
	                           	<ul></ul>
	                        </div>
							<div class="ccay-form-custom">
								<ul>
									<li class="ccay-form-row">
		                        		<samp class="i18n" i18nKey="order"></samp>
										<span class="ccay-form-input">{Array} 设置igrid进行多列行合并时，可设置列合并的优先级顺序。<br><h6>示例：rowRenderOp: {order: ["school", "class"]}</h6></span>
			                		</li>
			                		<li class="ccay-form-row">
		                        		<samp class="i18n" i18nKey="simpleSort"></samp>
										<span class="ccay-form-input">{Boolean} 设置igrid行合并模式下，是否进行简单排序，默认为false</span>
			                		</li>
			                		<li class="ccay-form-row">
		                        		<samp class="i18n" i18nKey="priority"></samp>
										<span class="ccay-form-input">{Boolean} 设置igrid多列行合并时，是否启用优先级合并（对优先级高的列优先行合并），默认为true</span>
			                		</li>
			                	</ul>
			                </div>
						</span>	
					</li>
					<li class="ccay-form-row">
						<samp class="i18n" i18nKey="group"></samp>	
						<span class="ccay-form-input">设置igrid显示为行分组类型。<br><h6>示例：rowRender: "group"</h6><br>
							rowRenderOp：{Object} 对行渲染类型进行配置<h5><a onclick="Ccay.example.ui.igird.rowRenderFunction.openDemo('tab3');">点击查看Demo</a></h5>
							<div class="ccay-form-body">
	                           	<ul></ul>
	                        </div>
							<div class="ccay-form-custom">
								<ul>
									<li class="ccay-form-row">
		                        		<samp class="i18n" i18nKey="order"></samp> 
										<span class="ccay-form-input">{Array}  设置igrid多列分组时，可设置分组字段的优先级顺序。<br><h6>示例：rowRenderOp: {order: ["school", "class"]}</h6></span>
			                		</li>
			                		<li class="ccay-form-row">
		                        		<samp class="i18n" i18nKey="groupSelect"></samp>
										<span class="ccay-form-input">{Boolean} 设置igrid行分组的标题头有否包含有 用于整组选中的 checkbox复选框，默认为true</span>
			                		</li>
			                		<li class="ccay-form-row">
		                        		<samp class="i18n" i18nKey="simpleSort"></samp>
										<span class="ccay-form-input">{Boolean} 设置igrid分组模式下，是否进行简单排序，默认为false</span>
			                		</li>
			                		<li class="ccay-form-row">
		                        		<samp class="i18n" i18nKey="groupTmpl"></samp>
										<span class="ccay-form-input">{String} 设置igrid行分组的标题头模板</span>
			                		</li>
			                	</ul>
			                </div>
						</span>	
					</li>
					<li class="ccay-form-row">
						<samp class="i18n" i18nKey="tree"></samp>	
						<span class="ccay-form-input">设置igrid显示为树表类型。<br><h6>示例：rowRender: "tree"</h6><br>
							rowRenderOp：{Object} 对行渲染类型进行配置<h5><a onclick="Ccay.example.ui.igird.rowRenderFunction.openDemo('tab4');">点击查看Demo</a></h5>
							<div class="ccay-form-body">
	                           	<ul></ul>
	                        </div>
							<div class="ccay-form-custom">
								<ul>
									<li class="ccay-form-row">
		                        		<samp class="i18n" i18nKey="parent"></samp>
										<span class="ccay-form-input">{String} 设置igrid的父节点的列，对应columns属性中field值</span>
			                		</li>
			                		<li class="ccay-form-row">
		                        		<samp class="i18n" i18nKey="field"></samp>
										<span class="ccay-form-input">{String} 设置igrid绑定的节点列，对应columns属性中field值</span>
			                		</li>
			                		<li class="ccay-form-row">
		                        		<samp class="i18n" i18nKey="selectParent"></samp>
										<span class="ccay-form-input">{Boolean} 设置是否选中时一并选中其所有父节点</span>
			                		</li>
			                		<li class="ccay-form-row">
		                        		<samp class="i18n" i18nKey="showField"></samp>
										<span class="ccay-form-input">{String} 设置igrid显示的列，对应columns属性中field值</span>
			                		</li>
			                		<li class="ccay-form-row">
		                        		<samp class="i18n" i18nKey="sortData"></samp>
										<span class="ccay-form-input">{Boolean} 设置igrid是否进行节点数据的排序</span>
			                		</li>
			                		<li class="ccay-form-row">
		                        		<samp class="i18n" i18nKey="select"></samp>
										<span class="ccay-form-input">{String} {String} 设置 igrid节点的多选或者单选：multi、single两种<br>single：设置单选框<br>multi：设置复选框</span>
			                		</li>
			                		<li class="ccay-form-row">
		                        		<samp class="i18n" i18nKey="delRoot"></samp>
										<span class="ccay-form-input">{Boolean} 设置igrid是否删除根节点</span>
			                		</li>
			                		<li class="ccay-form-row">
		                        		<samp class="i18n" i18nKey="lazyLoad"></samp>
										<span class="ccay-form-input">{Boolean} 设置igrid节点数据是否进行延迟加载<h5><a onclick="Ccay.example.ui.igird.rowRenderFunction.openDemo('tab5');">点击查看Demo</a></h5></span>
			                		</li>
			                		<li class="ccay-form-row">
		                        		<samp class="i18n" i18nKey="loadDeep"></samp>
										<span class="ccay-form-input">{Number} 设置igrid进行加载节点数据的深度</span>
			                		</li>
			                		<li class="ccay-form-row">
		                        		<samp class="i18n" i18nKey="allowSearch"></samp>
										<span class="ccay-form-input">{Boolean} 设置igrid是否允许将搜索条件带入请求中</span>
			                		</li>
			                		<li class="ccay-form-row">
		                        		<samp class="i18n" i18nKey="ajax"></samp>
										<span class="ccay-form-input">{Object} 设置igrid进行节点数据延迟加载的请求参数</span>
			                		</li>
			                		<li class="ccay-form-row">
		                        		<samp class="i18n" i18nKey="url"></samp>
										<span class="ccay-form-input">{String} 设置igrid子节点加载的请求地址</span>
			                		</li>
			                		<li class="ccay-form-row">
						                <samp><h3>Event属性</h3></samp>
								        <span class="ccay-form-input"><h3>描述</h3></span>
							        </li>
							        <li class="ccay-form-row">
		                        		<samp class="i18n" i18nKey="fnCheckChild"></samp>
										<span class="ccay-form-input">{Function} 设置选中子节点的事件</span>
			                		</li>
			                	</ul>
			                </div>
						</span>	
					</li>
				</ul>
			</div>
			</form>
		</div>
	</div>
	
	<!-- Demo区 -->
	<div title='行合并' tabid='tab2'>
		<span class="showClew">备注：IGrid行合并Demo进行名称相同的一些行的合并显示</span><br /><br />
		<form id="rowUniteForm" class="init ccay-form">
		<div class="ccay-form-body">
			<ul>
				<!--条件输入区域-->
				<li class="ccay-form-row">
				  <samp class="i18n" i18nKey="name"></samp>
				  <span class='ccay-form-input'>
				    <input type="text" name="name" />
				  </span>
				</li>
			</ul>
		</div>
		<!--查询操作区域-->
		<div class="ccay-operate">
			<span id="btnUniteSearch" class="ccay-button default" >
				<a class="ccay-icon search"></a>
				<label class="i18n" i18nKey="ccay.common.button.search"></label>
			</span>
			<span class="init button ccay-button reset" >
				<a class="ccay-icon reset"></a>
				<label class="i18n" i18nKey="ccay.common.button.reset"></label>
			</span>
		</div>
		</form>
		<div class="ccay-grid">
			<div id="tbriStudent1"></div>
			<div id="iStudent1"></div>
		</div>
		<h3>html Code</h3>
	 	<span></span>
	 	<div class="codeArea">
			<pre id='html1'>
&lt;form id="rowForm" class="init ccay-form">
	&lt;!--条件输入区域-->
	&lt;div class="ccay-form-body">
		&lt;ul>
			&lt;li class="ccay-form-row">
				&lt;samp class="i18n" i18nKey="name">&lt;/samp>
				&lt;span class='ccay-form-input'>
					&lt;input type="text" name="name" />
				&lt;/span>
			&lt;/li>
		&lt;/ul>
	&lt;/div>
	
	&lt;!--查询操作区域-->
	&lt;div class="ccay-operate">
		&lt;span id="btnSearch" class="ccay-button default" >
			&lt;a class="ccay-icon search">&lt;/a>
			&lt;label class="i18n" i18nKey="ccay.common.button.search">&lt;/label>
		&lt;/span>
		&lt;span class="init button ccay-button reset" >
			&lt;a class="ccay-icon reset">&lt;/a>
			&lt;label class="i18n" i18nKey="ccay.common.button.reset">&lt;/label>
		&lt;/span>
	&lt;/div>
&lt;/form>

&lt;!--Grid操作区域-->
&lt;div class="ccay-grid-toolbar">
	&lt;input onclick="operateTest($('#igridDemo1').manager().getSelectedRecords());" value='get selected records' type='button' />	
	&lt;input onclick="operateTest($('#igridDemo1').manager().getUpdatedRecords());" value='get updated records' type='button' />		   
	&lt;input id="btnDel" value='delete' type='button' />
	&lt;input id="btnUndoDel" value='undo delete' type=button />
	&lt;input onclick="operateTest($('#igridDemo1').manager().getDeletedRecords());" value='get deleted records' type='button' />
	&lt;input id="btnAdd" value='insert' type='button' />
	&lt;input onclick="operateTest($('#igridDemo1').manager().getInsertedRecords());" value='get inserted records' type='button' />
	&lt;input id="btnSave" value='save' type='button' />
&lt;/div>

&lt;div id="igridDemo1">&lt;/div>
			</pre>
	 	</div>
	 	<h3>js Code</h3>
	    	<span></span>
	    	<div class="codeArea">
	    		<pre id='js1'>
operateTest = function(value) {
	alert(Ccay.DataHelper.toJsonStr(value));
};

var gridOption1 = {
	height: 300,
	editMode: true,
	
	//<span class="showClew"> rowRender: "rowSpan"设置数据列表显示为行合并类型</span>
	rowRender: "rowSpan",
	columns: [
		{columnType: "select", multi: true},
		
		//<span class="showClew"> rowSpan: true设置该列数据进行行合并。<span>当rowRender: "rowSpan"时有效</span></span>
		{field: 'name', width:100, header: "name", rowSpan: true, rule: {required: true}},
		{field: 'description', width:200, header: "description"},
		{field: 'id', width:100, header: "id", editable: false}
	],
	ajax: {
		url: 'services/ccay/demo/grid/list/page/${pageSize}/${curPage}/${orderBy}'
	},
	operation: {
		search: {
			btn: '#btnSearch',
			panel: '#rowForm'
		},
		del: {
			btn: '#btnDel',
			undoBtn: '#btnUndoDel'
		},
		insert: {
			btn: '#btnAdd',
			copy: true,
			clear: ['id']
		},
		save: {
			btn: '#btnSave',
			ajax: {
				url: "services/ccay/demo/grid/batch"
			}
		}
	}
};
		
$("#igridDemo1").igrid(gridOption1);
	    		</pre>
	    	</div>
	    	<div class="try">
		<a onclick="Ccay.example.openTry('#rowRenderDemo',$('#js1').html(),$('#html1').html())">亲自试一试</a>
	</div>
	</div>
	 
	<div title='行分组' tabid='tab3'>
	 	<span class="showClew">备注：IGrid行分组Demo进行名称相同的一些行的分组显示</span><br /><br />
	 	<form id="rowGroupForm" class="init ccay-form">
			<div class="ccay-form-body">
				<ul>
					<!--条件输入区域-->
					<li class="ccay-form-row">
					  <samp class="i18n" i18nKey="name"></samp>
					  <span class='ccay-form-input'>
					    <input type="text" name="name" />
					  </span>
					</li>
				</ul>
			</div>
			<!--查询操作区域-->
			<div class="ccay-operate">
				<span id="btnGroupSearch" class="ccay-button default" >
					<a class="ccay-icon search"></a>
					<label class="i18n" i18nKey="ccay.common.button.search"></label>
				</span>
				<span class="init button ccay-button reset" >
					<a class="ccay-icon reset"></a>
					<label class="i18n" i18nKey="ccay.common.button.reset"></label>
				</span>
			</div>
		</form>
		<div class="ccay-grid">
			<div id="tbriStudent2"></div>
			<div id="iStudent2"></div>
		</div>
	 	<h3>html Code</h3>
	  	<span></span>
	  	<div class="codeArea">
			<pre id='html2'>
&lt;form id="rowForm" class="init ccay-form">
	&lt;!--条件输入区域-->
	&lt;div class="ccay-form-body">
		&lt;ul>
			&lt;li class="ccay-form-row">
				&lt;samp class="i18n" i18nKey="name">&lt;/samp>
				&lt;span class='ccay-form-input'>
					&lt;input type="text" name="name" />
				&lt;/span>
			&lt;/li>
		&lt;/ul>
	&lt;/div>
	
	&lt;!--查询操作区域-->
	&lt;div class="ccay-operate">
		&lt;span id="btnSearch" class="ccay-button default" >
			&lt;a class="ccay-icon search">&lt;/a>
			&lt;label class="i18n" i18nKey="ccay.common.button.search">&lt;/label>
		&lt;/span>
		&lt;span class="init button ccay-button reset" >
			&lt;a class="ccay-icon reset">&lt;/a>
			&lt;label class="i18n" i18nKey="ccay.common.button.reset">&lt;/label>
		&lt;/span>
	&lt;/div>
&lt;/form>

&lt;!--Grid操作区域-->
&lt;div class="ccay-grid-toolbar">
	&lt;input onclick="operateTest($('#igridDemo2').manager().getSelectedRecords());" value='get selected records' type='button' />	
	&lt;input onclick="operateTest($('#igridDemo2').manager().getUpdatedRecords());" value='get updated records' type='button' />		   
	&lt;input id="btnDel" value='delete' type='button' />
	&lt;input id="btnUndoDel" value='undo delete' type=button />
	&lt;input onclick="operateTest($('#igridDemo2').manager().getDeletedRecords());" value='get deleted records' type='button' />
	&lt;input id="btnAdd" value='insert' type='button' />
	&lt;input onclick="operateTest($('#igridDemo2').manager().getInsertedRecords());" value='get inserted records' type='button' />
	&lt;input id="btnSave" value='save' type='button' />
&lt;/div>

&lt;div id="igridDemo2">&lt;/div>
			</pre>
	  	</div>
	  	<h3>js Code</h3>
      	<span></span>
      	<div class="codeArea">
      		<pre id='js2'>
operateTest = function(value) {
	alert(Ccay.DataHelper.toJsonStr(value));
};

var gridOption2 = {
	height: 300,
	editMode: true,
	
	//<span class="showClew"> rowRender: "group"设置数据列表显示为行合并类型</span>
	rowRender: "group",
	columns: [
		{columnType: "select", multi: true},
		
		//<span class="showClew"> group: true设置该列数据进行行分组。<span>当rowRender: "group"时有效</span></span>
		{field: 'name', width:100, header: "name", group: true, rule: {required: true}},
		{field: 'description', width:200, header: "description"},
		{field: 'id', width: 100, header: 'id', editable: false}
	],
	ajax: {
		url: 'services/ccay/demo/grid/list/page/${pageSize}/${curPage}/${orderBy}'
	},
	operation: {
		search: {
			btn: '#btnSearch',
			panel: '#rowForm'
		},
		del: {
			btn: '#btnDel',
			undoBtn: '#btnUndoDel'
		},
		insert: {
			btn: '#btnAdd',
			copy: true,
			clear: ['id']
		},
		save: {
			btn: '#btnSave',
			ajax: {
				url: "services/ccay/demo/grid/batch"
			}
		}
	}
};
		
$("#igridDemo2").igrid(gridOption2);
      		</pre>
      	</div>
      	<div class="try">
			<a onclick="Ccay.example.openTry('#rowRenderDemo',$('#js2').html(),$('#html2').html())">亲自试一试</a>
		</div>
	 </div>
	 
	 <div title='树表--全加载' tabid='tab4'><br>
	 	<h4 id="hd1"><span onclick="Ccay.Common.toggle(this,'#demo1')" style="cursor:pointer;">实例1：IGrid静态树表--全加载</span></h4>
	 	<div id="demo1" style="display: none;">
	 		<span class="showClew">备注：IGrid动态树表--全加载Demo进行动态数据的节点数据全部加载显示</span><br /><br />
			<div id="iStudent3"></div>
			<h3>html Code</h3>
	  		<span></span>
	  		<div class="codeArea">
				<pre id='html3'>&lt;div id="igridDemo3">&lt;/div></pre>
			</div>
			<h3>js Code</h3>
      		<span></span>
      		<div class="codeArea">
      			<pre id='js3'>
//<span class="showClew"> 配置树表的静态数据源，未排序</span>
var datas3 = [
	{id: 1, name: '1111', age:22, pid: null},
	{id: 2, name: '11-1', age:22, pid: 1},
    {id: 3, name: '11-2', age:22, pid: 1},
    {id: 4, name: '11-3', age:22, pid: 1},
    {id: 8, name: '22-1-1', age:22, pid: 6},
    {id: 9, name: '22-1-2', age:22, pid: 6},
    {id: 5, name: '2222', age:22, pid: null},
    {id: 6, name: '22-1', age:22, pid: 5},
    {id: 7, name: '22-2', age:22, pid: 5},
    {id: 10, name: '3333', age:22, pid: null},
    {id: 11, name: '11', age:22, pid: 111}
];
	    
var gridOption3 = {
	showPager: false,
	
	//<span class="showClew"> 设置数据列表显示为树结构类型</span>
	rowRender: "tree",
	
	//<span class="showClew"> 对行渲染类型进行配置，当设置rowRender属性值时有效</span>
	rowRenderOp: {
		//<span class="showClew"> 设置igrid的父节点的列，对应columns属性中field值</span>
		parent: "pid",
		
		//<span class="showClew"> 设置igrid绑定的节点列，对应columns属性中field值</span>
		field: 'id',
		
		//<span class="showClew"> 设置igrid节点的单选</span>
		select:'single',
		
		//<span class="showClew"> 设置igrid显示的列，对应columns属性中field值</span>
		showField: 'name',
		
		//<span class="showClew"> 设置igrid是否进行节点数据的排序</span>
		sortData: true
	},
	columns: [
		{width: '150px', field: 'name', header: 'name'},
		{width: '100px', field: 'age', header: 'age'},
		{width: '100px', field: 'id', header: 'id', type: 'integer'},
		{width: '100px', field: 'pid', header: 'parentId', type: 'integer'}
	]
};
	    
$('#igridDemo3').igrid(gridOption3, datas3);
      			</pre>
      		</div>
      		<div class="try">
				<a onclick="Ccay.example.openTry('#rowRenderDemo',$('#js3').html(),$('#html3').html())">亲自试一试</a>
			</div>
		</div>
		
		<h4 id="hd5"><span onclick="Ccay.Common.toggle(this,'#demo5')" style="cursor:pointer;">实例2：IGrid动态树表（简单数据对象）--全加载</span></h4>
		<div id="demo5" style="display: none;">
	 		<span class="showClew">备注：1.IGrid动态树表--全加载Demo进行动态数据的节点数据全部加载显示
	 		<br>2.可进行树表的增、删、改、查、保存操作，以及子节点的增、删、改操作</span><br /><br />
		 	<form id="rowAllForm7" class="init ccay-form">
				<div class="ccay-form-body">
					<ul>
						<!--条件输入区域-->
						<li class="ccay-form-row">
						  <samp class="i18n" i18nKey="name"></samp>
						  <span class='ccay-form-input'>
						    <input type="text" name="name" />
						  </span>
						</li>
					</ul>
				</div>
				<!--查询操作区域-->
				<div class="ccay-operate">
					<span id="btnAllSearch7" class="ccay-button default" >
						<a class="ccay-icon search"></a>
						<label class="i18n" i18nKey="ccay.common.button.search"></label>
					</span>
					<span class="init button ccay-button reset" >
						<a class="ccay-icon reset"></a>
						<label class="i18n" i18nKey="ccay.common.button.reset"></label>
					</span>
				</div>
			</form>	
			<div id="fsiStudent7">
				<div class="ccay-grid">
					<div id="tbriStudent7"></div>
					<div id="iStudent7"></div>
				</div>
	 		</div>
	 		<h3>html Code</h3>
	  		<span></span>
	  		<div class="codeArea">
				<pre id='html7'>
&lt;form id="rowForm" class="init ccay-form">
	&lt;!--条件输入区域-->
	&lt;div class="ccay-form-body">
		&lt;ul>
			&lt;li class="ccay-form-row">
				&lt;samp class="i18n" i18nKey="name">&lt;/samp>
				&lt;span class='ccay-form-input'>
					&lt;input type="text" name="name" />
				&lt;/span>
			&lt;/li>
		&lt;/ul>
	&lt;/div>
	
	&lt;!--查询操作区域-->
	&lt;div class="ccay-operate">
		&lt;span id="btnSearch" class="ccay-button default" >
			&lt;a class="ccay-icon search">&lt;/a>
			&lt;label class="i18n" i18nKey="ccay.common.button.search">&lt;/label>
		&lt;/span>
		&lt;span class="init button ccay-button reset" >
			&lt;a class="ccay-icon reset">&lt;/a>
			&lt;label class="i18n" i18nKey="ccay.common.button.reset">&lt;/label>
		&lt;/span>
	&lt;/div>
&lt;/form>

&lt;!--Grid操作区域-->
&lt;div class="ccay-grid-toolbar">
	&lt;input onclick="operateTest($('#igridDemo7').manager().getSelectedRecords());" value='get selected records' type='button' />	
	&lt;input onclick="operateTest($('#igridDemo7').manager().getUpdatedRecords());" value='get updated records' type='button' />		   
	&lt;input onclick="operateTest($('#igridDemo7').manager().getDeletedRecords());" value='get deleted records' type='button' />
	&lt;input id="btnAdd" value='insert' type='button' />
	&lt;input onclick="operateTest($('#igridDemo7').manager().getInsertedRecords());" value='get inserted records' type='button' />
	&lt;input id="btnDel" value='delete' type='button' />
	&lt;input id="btnUndoDel" value='unDelete' type='button' />
	&lt;input id="btnSave" value='save' type='button' />
&lt;/div>

&lt;div id="igridDemo7">&lt;/div>
				</pre>
			</div>
			<h3>js Code</h3>
      		<span></span>
      		<div class="codeArea">
      			<pre id='js7'>
operateTest = function(value) {
	alert(Ccay.DataHelper.toJsonStr(value));
};

var gridOption7 = {
	height: 300,
	showPager: false,
	editMode: true,
	
	//<span class="showClew"> 设置数据列表显示为树结构类型</span>
	rowRender: "tree",
	
	//<span class="showClew"> 对行渲染类型进行配置，当设置rowRender属性值时有效</span>
	rowRenderOp: {
	
		//<span class="showClew"> 设置igrid的父节点的列，对应columns属性中field值</span>
		parent: "parentId",
		
		//<span class="showClew"> 设置igrid绑定的节点列，对应columns属性中field值</span>
		field: "id",
		
		//<span class="showClew"> 设置igrid显示的列，对应columns属性中field值</span>
		showField: "name",
		
		//<span class="showClew"> 设置igrid进行加载节点数据的深度</span>
		loadDeep: 4,
		
		//<span class="showClew"> 设置igrid节点的多选</span>
		select:'multi',
		
		//<span class="showClew"> 设置igrid是否进行节点数据的排序</span>
		sortData: true
	},
	columns: [
		{width: 150, field: 'name', header: 'name', rule: {required: true}},
		{width: 100, field: 'url', header: 'url'},
		{width: 100, field: 'id', header: 'id', editable: false},
		{width: 100, field: 'parentId', header: 'parentID', type: 'integer', fnEndEdit: function (value, rowData, td, col) {
        	if (!value) {
        		rowData.parentId = 0; 
        	}
        	rowData.parent && (rowData.parent.id = null);
		}}
	],
	ajax:{
		url: "services/ccay/demo/tree/list"
	},
	operation: {
		search: {
			btn: '#btnSearch',
			panel: '#rowForm'
		},
		del: {
    		btn: '#btnDel',
    		undoBtn: '#btnUndoDel'
		},
		insert: {
			btn: '#btnAdd',
			copy: true,
			clear: ['id'],
			defaultRow:{parentId: "0"}
		},
		save: {
			btn: '#btnSave',
			ajax: {
				url: "services/ccay/demo/tree/batch/false"
			}
		}
	}
};
		
$("#igridDemo7").igrid(gridOption7);
      			</pre>
      		</div>
      		<div class="try">
				<a onclick="Ccay.example.openTry('#rowRenderDemo',$('#js7').html(),$('#html7').html())">亲自试一试</a>
			</div>
	 	</div>
		
		<h4 id="hd2"><span onclick="Ccay.Common.toggle(this,'#demo2')" style="cursor:pointer;">实例2：IGrid动态树表（复杂数据对象）--全加载</span></h4>
		<div id="demo2" style="display: none;">
	 		<span class="showClew">备注：1.IGrid动态树表--全加载Demo进行动态数据的节点数据全部加载显示
	 		<br>2.可进行树表的增、删、改、查、保存操作，以及子节点的增、删、改操作</span><br /><br />
		 	<form id="rowAllForm" class="init ccay-form">
				<div class="ccay-form-body">
					<ul>
						<!--条件输入区域-->
						<li class="ccay-form-row">
						  <samp class="i18n" i18nKey="name"></samp>
						  <span class='ccay-form-input'>
						    <input type="text" name="name" />
						  </span>
						</li>
					</ul>
				</div>
				<!--查询操作区域-->
				<div class="ccay-operate">
					<span id="btnAllSearch" class="ccay-button default" >
						<a class="ccay-icon search"></a>
						<label class="i18n" i18nKey="ccay.common.button.search"></label>
					</span>
					<span class="init button ccay-button reset" >
						<a class="ccay-icon reset"></a>
						<label class="i18n" i18nKey="ccay.common.button.reset"></label>
					</span>
				</div>
			</form>	
			<div class="ccay-grid">
					<div id="tbriStudent4"></div>
					<div id="iStudent4"></div>
			</div>
	 		<h3>html Code</h3>
	  		<span></span>
	  		<div class="codeArea">
				<pre id='html4'>
&lt;form id="rowForm" class="init ccay-form">
	&lt;!--条件输入区域-->
	&lt;div class="ccay-form-body">
		&lt;ul>
			&lt;li class="ccay-form-row">
				&lt;samp class="i18n" i18nKey="name">&lt;/samp>
				&lt;span class='ccay-form-input'>
					&lt;input type="text" name="name" />
				&lt;/span>
			&lt;/li>
		&lt;/ul>
	&lt;/div>
	
	&lt;!--查询操作区域-->
	&lt;div class="ccay-operate">
		&lt;span id="btnSearch" class="ccay-button default" >
			&lt;a class="ccay-icon search">&lt;/a>
			&lt;label class="i18n" i18nKey="ccay.common.button.search">&lt;/label>
		&lt;/span>
		&lt;span class="init button ccay-button reset" >
			&lt;a class="ccay-icon reset">&lt;/a>
			&lt;label class="i18n" i18nKey="ccay.common.button.reset">&lt;/label>
		&lt;/span>
	&lt;/div>
&lt;/form>

&lt;!--Grid操作区域-->
&lt;div class="ccay-grid-toolbar">
	&lt;input onclick="operateTest($('#igridDemo4').manager().getSelectedRecords());" value='get selected records' type='button' />	
	&lt;input onclick="operateTest($('#igridDemo4').manager().getUpdatedRecords());" value='get updated records' type='button' />		   
	&lt;input onclick="operateTest($('#igridDemo4').manager().getDeletedRecords());" value='get deleted records' type='button' />
	&lt;input id="btnAdd" value='insert' type='button' />
	&lt;input onclick="operateTest($('#igridDemo4').manager().getInsertedRecords());" value='get inserted records' type='button' />
	&lt;input id="btnDel" value='delete' type='button' />
	&lt;input id="btnUndoDel" value='unDelete' type='button' />
	&lt;input id="btnSave" value='save' type='button' />
&lt;/div>

&lt;div id="igridDemo4">&lt;/div>
				</pre>
	  		</div>
	  		<h3>js Code</h3>
      		<span></span>
      		<div class="codeArea">
      			<pre id='js4'>
operateTest = function(value) {
	alert(Ccay.DataHelper.toJsonStr(value));
};

var gridOption4 = {
	height: 300,
	showPager: false,
	editMode: true,
	
	//<span class="showClew"> 设置数据列表显示为树结构类型</span>
	rowRender: "tree",
	
	//<span class="showClew"> 对行渲染类型进行配置，当设置rowRender属性值时有效</span>
	rowRenderOp: {
	
		//<span class="showClew"> 设置igrid的父节点的列，对应columns属性中field值</span>
		parent: "parent.id",
		
		//<span class="showClew"> 设置igrid绑定的节点列，对应columns属性中field值</span>
		field: "id",
		
		//<span class="showClew"> 设置igrid显示的列，对应columns属性中field值</span>
		showField: "name",
		
		//<span class="showClew"> 设置igrid进行加载节点数据的深度</span>
		loadDeep: 4,
		
		//<span class="showClew"> 设置igrid节点的多选</span>
		select:'multi',
		
		//<span class="showClew"> 设置igrid是否进行节点数据的排序</span>
		sortData: true
	},
	columns: [
		{width: 150, field: 'name', header: 'name', rule: {required: true}},
		{width: 100, field: 'url', header: 'url'},
		{width: 100, field: 'id', header: 'id', editable: false},
		
		//<span class="showClew"> displayField：设置该列的显示，应用于复杂对象</span>
		{width: 100, field: 'parent.id', displayField: "data.parent ? data.parent.id : null", header: 'parentID', type: 'integer', fnEndEdit: function (value, rowData, td, col) {
        	if (!value) {
        		rowData.parent.id = 0; 
        	}
        	rowData.parentId = null;
		}},
		{width: 100, field: 'parent.name', displayField: "data.parent ? data.parent.name : null", header: 'parentName', editable: false}
	],
	ajax:{
		url: "services/ccay/demo/tree/list"
	},
	operation: {
		search: {
			btn: '#btnSearch',
			panel: '#rowForm'
		},
		del: {
    		btn: '#btnDel',
    		undoBtn: '#btnUndoDel'
		},
		insert: {
			btn: '#btnAdd',
			copy: true,
			clear: ['id'],
			defaultRow:{parent: {id: "0", name: ""}}
		},
		save: {
			btn: '#btnSave',
			ajax: {
				url: "services/ccay/demo/tree/batch/false"
			}
		}
	}
};
		
$("#igridDemo4").igrid(gridOption4);
      			</pre>
      		</div>
      		<div class="try">
				<a onclick="Ccay.example.openTry('#rowRenderDemo',$('#js4').html(),$('#html4').html())">亲自试一试</a>
			</div>
	 	</div>
	 </div>
	 
	 <div title='树表--延迟加载' tabid='tab5'><br>
	 	<h4 id="hd3"><span onclick="Ccay.Common.toggle(this,'#demo3')" style="cursor:pointer;">实例1：IGrid静态树表--延迟加载</span></h4>
	 	<div id="demo3" style="display: none;">
	 		<span class="showClew">备注：1.IGrid静态树表--延迟加载Demo初始化时只加载父级节点，单击图标才加载子级节点
	 		<br>2.可进行树表的子节点的增、删、改操作</span><br /><br />
	 		<div id="iStudent5"></div>
	 		<h3>html Code</h3>
	  		<span></span>
	  		<div class="codeArea">
				<pre id='html5'>&lt;div id="igridDemo5">&lt;/div></pre>
			</div>
			<h3>js Code</h3>
      		<span></span>
      		<div class="codeArea">
      			<pre id='js5'>
//<span class="showClew"> 配置树表的静态数据源，未排序</span>
var datas5 = [
	{id:1 ,name:'1111', age:22, pid:null},
	{id:6, name:'6666', age:22, pid:null},
	{id:3, name:'3333', age:22, pid:null},
	{id:5, name:'5555', age:22, pid:null},
	{id:2, name:'2222', age:22, pid:null},
	{id:4, name:'4444', age:22, pid:null},
	{id:7, name:'7777', age:22, pid:null}
];

//<span class="showClew"> 配置树表的子级节点的静态数据源，未排序</span>
getChild = function(success){
	var result = [
		{id:111,name:'11-1',age:22,pid:11},
		{id:113,name:'11-3',age:22,pid:11},
		{id:114,name:'11-4',age:22,pid:11},
		{id:112,name:'11-2',age:22,pid:11}
	];
	success(result);
};
		
var gridOption5 = {
	showPager: false,
	showSeq: true,
	
	//<span class="showClew"> 设置数据列表显示为树结构类型</span>
	rowRender: "tree",
	
	//<span class="showClew"> 对行渲染类型进行配置，当设置rowRender属性值时有效</span>
	rowRenderOp: {
		//<span class="showClew"> 设置igrid的父节点的列，对应columns属性中field值</span>
		parent: "parentId",
		
		//<span class="showClew"> 设置igrid绑定的节点列，对应columns属性中field值</span>
		field: "id",
		
		//<span class="showClew"> 设置igrid显示的列，对应columns属性中field值</span>
		showField: "name",
		
		//<span class="showClew"> 设置igrid节点的单选</span>
		select:"single",
		
		//<span class="showClew"> 设置igrid节点数据进行延迟加载</span>
		lazyLoad: true,
		
		//<span class="showClew"> 设置igrid进行加载节点数据的深度</span>
		loadDeep: 2,
		
		//<span class="showClew"> 设置igrid进行节点数据延迟加载的请求参数</span>
		ajax: {getData: getChild}
	},
	columns: [
		{width: '150px', field: 'name', header: 'name'},
		{width: '100px', field: 'age', header: 'age', type: 'integer'},
		{width: '100px', field: 'id', header: 'id', type: 'integer'},
		{width: '100px', field: 'pid', header: 'parentID', type: 'integer'}
	],
	//<span class="showClew"> 设置igrid进行节点数据的增、删操作</span>
	operation:{
		insert:{
			defaultRow: {id: null, name: 'node', age: 22, pid: null}
		},
		del:{}
	}
}
	    
$("#igridDemo5").igrid(gridOption5, datas5);
      			</pre>
      		</div>
      		<div class="try">
				<a onclick="Ccay.example.openTry('#rowRenderDemo',$('#js5').html(),$('#html5').html())">亲自试一试</a>
			</div>
	 	</div>
	 
	 	<h4 id="hd6"><span onclick="Ccay.Common.toggle(this,'#demo6')" style="cursor:pointer;">实例2：IGrid动态树表（简单数据对象）--延迟加载</span></h4>
	 	<div id="demo6" style="display: none;">
	 		<span class="showClew">备注：1.IGrid动态树表--延迟加载Demo初始化时只加载父级节点，单击图标才加载子级节点
	 		<br>2.可进行树表的增、删、改、查、保存操作，以及子节点的增、删、改操作</span><br /><br />
		 	<form id="rowTreeForm8" class="init ccay-form">
				<div class="ccay-form-body">
					<ul>
						<!--条件输入区域-->
						<li class="ccay-form-row">
						  <samp class="i18n" i18nKey="name"></samp>
						  <span class='ccay-form-input'>
						    <input type="text" name="name" />
						  </span>
						</li>
					</ul>
				</div>
				<!--查询操作区域-->
				<div class="ccay-operate">
					<span id="btnTreeSearch8" class="ccay-button default" >
						<a class="ccay-icon search"></a>
						<label class="i18n" i18nKey="ccay.common.button.search"></label>
					</span>
					<span class="init button ccay-button reset" >
						<a class="ccay-icon reset"></a>
						<label class="i18n" i18nKey="ccay.common.button.reset"></label>
					</span>
				</div>
			</form>
			<div class="ccay-grid">
				<div id="tbriStudent8"></div>
				<div id="iStudent8"></div>
			</div>
	 		<h3>html Code</h3>
	  		<span></span>
	  		<div class="codeArea">
				<pre id='html8'>
&lt;form id="rowForm" class="init ccay-form">
	&lt;!--条件输入区域-->
	&lt;div class="ccay-form-body">
		&lt;ul>
			&lt;li class="ccay-form-row">
				&lt;samp class="i18n" i18nKey="name">&lt;/samp>
				&lt;span class='ccay-form-input'>
					&lt;input type="text" name="name" />
				&lt;/span>
			&lt;/li>
		&lt;/ul>
	&lt;/div>
	
	&lt;!--查询操作区域-->
	&lt;div class="ccay-operate">
		&lt;span id="btnSearch" class="ccay-button default" >
			&lt;a class="ccay-icon search">&lt;/a>
			&lt;label class="i18n" i18nKey="ccay.common.button.search">&lt;/label>
		&lt;/span>
		&lt;span class="init button ccay-button reset" >
			&lt;a class="ccay-icon reset">&lt;/a>
			&lt;label class="i18n" i18nKey="ccay.common.button.reset">&lt;/label>
		&lt;/span>
	&lt;/div>
&lt;/form>

&lt;!--Grid操作区域-->
&lt;div class="ccay-grid-toolbar">
	&lt;input onclick="operateTest($('#igridDemo8').manager().getSelectedRecords());" value='get selected records' type='button' />	
	&lt;input onclick="operateTest($('#igridDemo8').manager().getUpdatedRecords());" value='get updated records' type='button' />		   
	&lt;input onclick="operateTest($('#igridDemo8').manager().getDeletedRecords());" value='get deleted records' type='button' />
	&lt;input id="btnAdd" value='insert' type='button' />
	&lt;input onclick="operateTest($('#igridDemo8').manager().getInsertedRecords());" value='get inserted records' type='button' />
	&lt;input id="btnSave" value='save' type='button' />
&lt;/div>

&lt;div id="igridDemo8">&lt;/div>
				</pre>
	  		</div>
	  		<h3>js Code</h3>
      		<span></span>
      		<div class="codeArea">
      			<pre id='js8'>
operateTest = function(value) {
	alert(Ccay.DataHelper.toJsonStr(value));
};
var gridOption8 = {
	height: 300,
	editMode: true,
	
	//<span class="showClew"> 设置数据列表显示为树结构类型</span>
	rowRender: "tree",
	
	//<span class="showClew"> 对行渲染类型进行配置，当设置rowRender属性值时有效</span>
	rowRenderOp: {
		//<span class="showClew"> 设置igrid的父节点的列，对应columns属性中field值</span>
		parent: "parentId",
		
		//<span class="showClew"> 设置igrid绑定的节点列，对应columns属性中field值</span>
		field: "id",
		
		//<span class="showClew"> 设置igrid显示的列，对应columns属性中field值</span>
		showField: "name",
		
		//<span class="showClew"> 设置igrid节点的多选</span>
		select:'multi',
		
		//<span class="showClew"> 设置igrid进行加载节点数据的深度</span>
		loadDeep: 5,
		
		//<span class="showClew"> 设置igrid节点数据进行延迟加载</span>
		lazyLoad: true,
		
		//<span class="showClew"> 设置igrid是否删除根节点</span>
		delRoot: true,
		
		//<span class="showClew"> 设置igrid容许将搜索条件带入请求中</span>
		allowSearch: true,
		
		//<span class="showClew"> 设置igrid进行节点数据延迟加载的请求参数</span>
		ajax: {
			url: "services/ccay/demo/tree/rootlist?parentId={0}"
		},
		
		//<span class="showClew"> 设置igrid设置子节点的方法</span>
		fnCheckChild: function (node) {
			return node.hasChild;
		}
	},
	columns: [
		{width: 200, field: 'name', header: 'name', rule: {required: true}},
		{width: 150, field: 'url', header: 'url'},
		{width: 100, field: 'id', header: 'id', editable: false},
		{width: 100, field: 'parentId', header: 'parentID', type: 'integer', fnEndEdit: function (value, rowData, td, col) {
        	if (!value) {
        		rowData.parentId = 0; 
        	}
        	rowData.parent && (rowData.parent.id = null);
		}}
	],
	ajax:{
		url: "services/ccay/demo/tree/rootlist/{0}/{1}"
	},
	   operation: {
	   	search: {
	   		btn: '#btnSearch',
			panel: '#rowForm'
	   	},
	   	del: {
	   	},
	   	insert: {
	   		btn: '#btnAdd',
	   		copy: true,
	   		clear: ['id'],
	   		defaultRow:{parentId: 0}
	   	},
	   	save: {
	   		btn: '#btnSave',
	   		ajax: {
	   			url: "services/ccay/demo/tree/batch/true"
	   		}
	   	}
	}
};

$("#igridDemo8").igrid(gridOption8);
				</pre>
      		</div>
	      	<div class="try">
				<a onclick="Ccay.example.openTry('#rowRenderDemo',$('#js8').html(),$('#html8').html())">亲自试一试</a>
			</div>
	 	</div>
	 
	 	<h4 id="hd4"><span onclick="Ccay.Common.toggle(this,'#demo4')" style="cursor:pointer;">实例3：IGrid动态树表（复杂数据对象）--延迟加载</span></h4>
	 	<div id="demo4" style="display: none;">
	 		<span class="showClew">备注：1.IGrid动态树表--延迟加载Demo初始化时只加载父级节点，单击图标才加载子级节点
	 		<br>2.可进行树表的增、删、改、查、保存操作，以及子节点的增、删、改操作</span><br /><br />
		 	<form id="rowTreeForm" class="init ccay-form">
				<div class="ccay-form-body">
					<ul>
						<!--条件输入区域-->
						<li class="ccay-form-row">
						  <samp class="i18n" i18nKey="name"></samp>
						  <span class='ccay-form-input'>
						    <input type="text" name="name" />
						  </span>
						</li>
					</ul>
				</div>
				<!--查询操作区域-->
				<div class="ccay-operate">
					<span id="btnTreeSearch" class="ccay-button default" >
						<a class="ccay-icon search"></a>
						<label class="i18n" i18nKey="ccay.common.button.search"></label>
					</span>
					<span class="init button ccay-button reset" >
						<a class="ccay-icon reset"></a>
						<label class="i18n" i18nKey="ccay.common.button.reset"></label>
					</span>
				</div>
			</form>
			<div class="ccay-grid">
				<div id="tbriStudent6"></div>
				<div id="iStudent6"></div>
			</div>
	 		<h3>html Code</h3>
	  		<span></span>
	  		<div class="codeArea">
				<pre id='html6'>
&lt;form id="rowForm" class="init ccay-form">
	&lt;!--条件输入区域-->
	&lt;div class="ccay-form-body">
		&lt;ul>
			&lt;li class="ccay-form-row">
				&lt;samp class="i18n" i18nKey="name">&lt;/samp>
				&lt;span class='ccay-form-input'>
					&lt;input type="text" name="name" />
				&lt;/span>
			&lt;/li>
		&lt;/ul>
	&lt;/div>
	
	&lt;!--查询操作区域-->
	&lt;div class="ccay-operate">
		&lt;span id="btnSearch" class="ccay-button default" >
			&lt;a class="ccay-icon search">&lt;/a>
			&lt;label class="i18n" i18nKey="ccay.common.button.search">&lt;/label>
		&lt;/span>
		&lt;span class="init button ccay-button reset" >
			&lt;a class="ccay-icon reset">&lt;/a>
			&lt;label class="i18n" i18nKey="ccay.common.button.reset">&lt;/label>
		&lt;/span>
	&lt;/div>
&lt;/form>

&lt;!--Grid操作区域-->
&lt;div class="ccay-grid-toolbar">
	&lt;input onclick="operateTest($('#igridDemo6').manager().getSelectedRecords());" value='get selected records' type='button' />	
	&lt;input onclick="operateTest($('#igridDemo6').manager().getUpdatedRecords());" value='get updated records' type='button' />		   
	&lt;input onclick="operateTest($('#igridDemo6').manager().getDeletedRecords());" value='get deleted records' type='button' />
	&lt;input id="btnAdd" value='insert' type='button' />
	&lt;input onclick="operateTest($('#igridDemo6').manager().getInsertedRecords());" value='get inserted records' type='button' />
	&lt;input id="btnSave" value='save' type='button' />
&lt;/div>

&lt;div id="igridDemo6">&lt;/div>
				</pre>
	  		</div>
	  		<h3>js Code</h3>
      		<span></span>
      		<div class="codeArea">
      			<pre id='js6'>
operateTest = function(value) {
	alert(Ccay.DataHelper.toJsonStr(value));
};
var gridOption6 = {
	height: 300,
	editMode: true,
	
	//<span class="showClew"> 设置数据列表显示为树结构类型</span>
	rowRender: "tree",
	
	//<span class="showClew"> 对行渲染类型进行配置，当设置rowRender属性值时有效</span>
	rowRenderOp: {
		//<span class="showClew"> 设置igrid的父节点的列，对应columns属性中field值</span>
		parent: "parent.id",
		
		//<span class="showClew"> 设置igrid绑定的节点列，对应columns属性中field值</span>
		field: "id",
		
		//<span class="showClew"> 设置igrid显示的列，对应columns属性中field值</span>
		showField: "name",
		
		//<span class="showClew"> 设置igrid节点的多选</span>
		select:'multi',
		
		//<span class="showClew"> 设置igrid进行加载节点数据的深度</span>
		loadDeep: 5,
		
		//<span class="showClew"> 设置igrid节点数据进行延迟加载</span>
		lazyLoad: true,
		
		//<span class="showClew"> 设置igrid是否删除根节点</span>
		delRoot: true,
		
		//<span class="showClew"> 设置igrid进行节点数据延迟加载的请求参数</span>
		ajax: {
			url: "services/ccay/demo/tree/rootlist?parentId={0}"
		},
		
		//<span class="showClew"> 设置igrid设置子节点的方法</span>
		fnCheckChild: function (node) {
			return node.hasChild;
		}
	},
	columns: [
		{width: 200, field: 'name', header: 'name', rule: {required: true}},
		{width: 150, field: 'url', header: 'url'},
		{width: 100, field: 'id', header: 'id', editable: false},
		{width: 100, field: 'parent.id', header: 'parentID', type: 'integer', fnEndEdit: function (value, rowData, td, col) {
        	if (!value) {
        		rowData.parent.id = 0; 
        	}
        	rowData.parentId = null;
		}},
		{width: 150, field: 'parent.name', header: 'parentName', editable: false}
	],
	ajax:{
		url:"services/ccay/demo/tree/rootlist/{0}/{1}"
	},
	   operation: {
	   	search: {
	   		btn: '#btnSearch',
			panel: '#rowForm'
	   	},
	   	del: {
	   	},
	   	insert: {
	   		btn: '#btnAdd',
	   		copy: true,
	   		clear: ['id'],
	   		defaultRow:{parent: {id: "0", name: ""}}
	   	},
	   	save: {
	   		btn: '#btnSave',
	   		ajax: {
	   			url: "services/ccay/demo/tree/batch/true"
	   		}
	   	}
	}
};

$("#igridDemo6").igrid(gridOption6);
				</pre>
      		</div>
	      	<div class="try">
				<a onclick="Ccay.example.openTry('#rowRenderDemo',$('#js6').html(),$('#html6').html())">亲自试一试</a>
			</div>
	 	</div>
	 	
	 	
	 </div>
	 
	 <!-- Try区 -->
	 <div title="试一试" tabid="trytab" >
	    <fieldset class='ccay-demo'>
	    <legend ><h2>代码区</h2></legend>
		   
		   <span>请在下面的文本框中编辑您的代码，然后单击此按钮测试结果  ————></span><input value="try it yourself" type="button" onclick="Ccay.example.runDemo()" /> 

				<div>
				    <table  style="width:100%;">
				      <tr>
				        <td style="width:100%;">
						<h3>js Code:</h3>	
						  <!-- 高度按需来调整。默认最小应为100px -->					
	                      <textarea id="jsTxt" style="height:250px;width:99%;"></textarea>
	                    </td>   
	                  </tr>
	                  <tr>
	                    <td style="width:100%;">
						<h3>html Code:</h3>
						  <!-- 高度按需来调整。默认最小应为100px -->
	                      <textarea id="htmlTxt" style="height:250px;width:99%;"></textarea>
	                    </td>
	                  </tr> 
                    </table>
				</div>
           </fieldset>
        <fieldset class='ccay-demo'>
          <legend ><h2>结果区</h2></legend>
			<div>
				<div style="overflow:auto;" id="demoMainPanel"></div>
			</div>
        </fieldset>
     </div>
	 
	 <!-- FAQ区 -->
	 <div title="FAQ">
		  <form class="init ccay-form">
		    <div class="ccay-form-body">
		    <ul>
		    	<li class="ccay-form-row">
			      <samp><h3>问题</h3></samp>
			      <span class="ccay-form-input">
			               <h3>解决方案</h3>
			      </span>
			    </li>
		    </ul>
			</div>     
			<div class="ccay-form-custom">
			    <ul>                     
			        <!-- 若问题和内容较多，可在li中的class加上ccay-form-whole -->
			        <li class="ccay-form-row">
			                          <samp class="i18n" i18nKey=""></samp>                          
			                         <span class="ccay-form-input"></span>
			        </li>  
			    </ul>
			</div>
		  </form>                    
    </div> 
	 
</div>